<template>
  <v-container class='pa-0  pb-10' fluid>
    <v-card
      class='mx-auto'
      v-if='isGroupEmpty'
      flat>
      <v-row
        class='my-0'
        justify="center"
        align='center'
        id='emptyRow'
      >
        <h1>
          请点击左侧导航栏选择团队~
        </h1>
      </v-row>
    </v-card>
    <v-card
      class='mx-auto pb-2'
      flat
      v-else>
        <v-card-title class='text-h4 font-weight-medium'>
          {{currentGroup['GROUP_NAME']}}
        </v-card-title>
        <v-card-subtitle class='subtitle-1 font-weight-medium'>
          {{currentGroup['DESCRIPTION']}}
        </v-card-subtitle>
      <v-card-text>
        <v-divider></v-divider>
        <div class=''>
          <v-row class='py-2 ma-0'>
            <div class='text-h5'>
              成员
            </div>
            <v-spacer></v-spacer>
            <v-btn @click='inviteDialog=true' color="secondary">
                <v-icon>mdi-plus</v-icon>
                <span>邀请成员</span>
            </v-btn>
          </v-row>
          <group-user-table
            :user='currentGroupUsers'
            :group-id='currentGroup.ID'
            @freshList='getGroupUsers'
          />
        </div>
        <v-divider class='my-5'></v-divider>
        <div v-if='isLeader'>
          <v-row class='py-2 ma-0' >
            <div class='text-h5'>
              团队设置
            </div>
          </v-row>
          <GroupSetting
            :group='currentGroup'
            :user='user'
            @freshGroup='freshGroup'
          />
        </div>

      </v-card-text>
    </v-card>
<!--    邀请新成员对话框-->
    <v-dialog
      v-model="inviteDialog"
      transition="dialog-bottom-transition"
      max-width="600px"
    >
      <v-card>
        <v-card-title>
          <span class='text-h5'>邀请成员</span>
        </v-card-title>
        <v-divider/>
        <v-card-text >
          <v-row justify='center' align='center' class='mt-3'>
            <h3>
              <v-icon x-large>mdi-account-multiple</v-icon>
            </h3>
          </v-row>
          <v-row justify='center' align='center'>
            <span class=''>邀请加入团队 <strong>{{currentGroup['GROUP_NAME']}}</strong></span>
          </v-row>
          <search-user-input
            :user='user'
            :model-user-id='inviteUserId'
            @inputOnChange='inputOnChange'
            @enableBtn='enableBtn'
          />
        </v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <progress-button
            :text="true"
            :loading='loading'
            :disabled='btnDisable'
            progressColor="primary"
            color="primary"
            @click="invite"
            title="邀请">
          </progress-button>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </v-container>
</template>

<script>
  import progressButton from '@/components/common/ProgressButton'
  import GroupUserTable from '@/components/group/GroupUserTable'
  import GroupSetting from '@/components/group/GroupSetting'
  import SearchUserInput from '@/components/common/SearchUserInput'
  import userApi from '@/api/apiPath/userApi'
  import groupApi from '@/api/apiPath/groupApi'

  export default {
    name: 'GroupManagement',
    props: {
      currentGroup: {
        types: Object,
        default: {}
      },
      user: {
        default: {}
      }
    },
    components: {
      progressButton,
      GroupUserTable,
      GroupSetting,
      SearchUserInput
    },
    data() {
      return {
        inviteDialog: false,
        inviteUserId: '',
        isLeader: false,
        loading: false,
        btnDisable: true,
        foundUser: null,
        currentGroupUsers: []
      }
    },
    methods: {
      async invite() {
        try {
          const result = await groupApi.inviteToGroup({
            userId: this.inviteUserId,
            groupId: this.currentGroup.ID
          })
          this.inviteDialog = false
          this.loading = false
          this.$toast.success(result.data)
          await this.getGroupUsers()
        } catch (e) {
          this.$toast.error(`邀请失败${e}`)
        }
      },
      async inputChange() {
        if (this.inviteUserId && this.inviteUserId !== this.user.id) {
          const { data: result } = await userApi.getUserById(this.inviteUserId)
          if (result) {
            this.foundUser = result
          } else {
            this.foundUser = null
          }
        } else {
          this.foundUser = null
        }
      },
      async getGroupUsers() {
        try {
          const { data: result } = await groupApi.getGroupUsers({
            groupId: this.currentGroup.ID
          })
          console.log(result)
          this.currentGroupUsers = result.users
          this.isLeader = result.isLeader
        } catch (e) {
          this.$toast.error(`获取用户失败${e}`)
        }
      },
      freshGroup() {
        this.$nextTick(() => {
          this.$emit('freshGroup')
        })
      },
      enableBtn(val) {
        console.log(val)
        this.btnDisable = val
      },
      inputOnChange(val) {
        this.inviteUserId = val
      }
    },
    computed: {
      isGroupEmpty: {
        get() {
          return JSON.stringify(this.currentGroup) === '{}'
        }
      }
    },
    watch: {
      currentGroup: {
        handler() {
          this.$nextTick(() => {
            this.getGroupUsers()
          })
        }
      }
    }

  }
</script>

<style scoped>
  #emptyRow{
    height: 400px;
  }
</style>
